@extends('layouts.head')

@section('title')
BOM管理
@endsection
@section('breadcrumb')
    <h4 >BOM管理</h4>
@endsection
@section('content')

<div class="row" >
    <div class="col-md-12">
        <div class="box box-primary ">
            <div  class="box-header with-border">
            <Row type="flex" justify="start" class="code-row-bg">

            </Row>
            </div>
            <div  class="box-body" >

                <table class="table table-bordered "  >
                        <thead>
                            <tr>
                                <th>成品</th>
                                <th>详细信息</th>
                                </tr>
                        </thead>
                        <tbody>
                            <tr  >
                                <td style="width:170px;">
                                        <Button-group vertical>
                                            <i-button v-for ="good in goods " v-on:click="clickOne(good)" type="text" >
                                            <h5 class="text-yellow"  v-if="good['id']==thisGoodId" >@{{good['name']}}-@{{good['goodsCode']}}</h5>
                                            <h5  v-else >@{{good['name']}}-@{{good['goodsCode']}}</h5>
                                            </i-button>
                                        </Button-group>
                                </td>
                                <td  >
                                    <div style="bottom:5px;left:10px">
                                        <i-input size="small" readonly :value.sync="clickInfo" style="width:240px;"></i-input>
                                        <i-button  size="small"  v-on:click="addGoodsVV"  type="primary">添加</i-button>
                                        <Poptip    v-else  confirm   title="确定删除？"   @on-ok="delGoods" >
                                        <i-button size="small" type="error" >删除</i-button>
                                        </Poptip>   
                                  
                                      </div>  
                                 <div style="height:700px;overflow :auto">   
                                      <v-tree :data-source.sync="oneGoodsTree" :checkable="true"  :on-select="thisTreeGoods"  ></v-tree>
                                  </div>   
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                    <br>
                      <Page :total=goodsTotal  @on-change="getPage"   :page-size="20">  </Page>  
            </div>

        </div>   
    </div>
</div>


<!-- modal -->
<Modal :visible.sync="vAddGoods" title="操作" @on-ok="addGoods"  ok-text="添加"   >
@{{editName}}
       <Form-item label="选择子件添加">
              <i-select :model.sync="addGoodsId" filterable >
                <i-option v-for="item in allParts" :value="item.id">@{{ item.name }}-@{{ item.goodsCode }}</i-option>
              </i-select>
        </Form-item> 
</Modal>

<Modal :visible.sync="CV" title="操作" @on-ok="addGoods"  >
     
</Modal>
{{----------------------------------------------------------------------------------------------------------------------------------- --}}

<script>



// 用表单来初始化

    var vm =new Vue({
        el:'body',
        data:{
            allGoods:[],
            allParts:[],
            addGoodsId:'',
            page:1,
            min:0,
            max:19,
            goodsTotal:0,
            childPage:1,
            childMin:0,
            childMax:19,
            partTotal:0,
            vAddGoods:false,
            vEditGoods:false,
            CV:false,
            vEditPart:false,
            vDelPart:false,
            editGoodsItem:{_token:'',name:'',goodsCode:'',goodsType:'',unit:'',storage:'',},
            addGoodsItem:{_token:'',name:'',goodsCode:'',goodsType:'',unit:'',storage:'',},
            editId:'',
            editName:'',
            oneGoodsTree: [],
            thisGoodId:'',
            firstInfo:'',
            clickInfo:'',

        },


/*********************************************************************************************/

       created:function(){                       //初始get读取数据
          this.$http.get('/goods/getGoods').then((response)=>{this.allGoods=response.data,this.goodsTotal=this.allGoods.length}).then((response)=>{});
          this.$http.get('/goods/getParts').then((response)=>{this.allParts=response.data,this.partTotal=this.allParts.length}).then((response)=>{});
          
        },
                
        computed: {
                    goods: function () {
                        return this.allGoods.slice(this.min, this.max)
                    },
                    parts: function () {
                        return this.allParts.slice(this.childMin, this.childMax)
                    }
        },
/*************************************************************************/
        methods:{
         
                getPage:function(value){
                    this.page=value;
                    this.min=0+20*value-20;
                    this.max=19+20*value-20;
                    console.log( this.page)
                },
                 clickOne:function(good){
                    this.editcId= this.thisGoodId=good.id;
                    this.clickInfo=good.name+'-'+good.goodsCode;
                    this.$http.get('/goods/getTree/'+this.thisGoodId).then((response)=>{this.oneGoodsTree=response.data; },(response) =>{});
                },
                thisTreeGoods:function(date){
                    this.editpId=date[0]['pid'];
                    this.editcId=date[0]['id'];
                    this.clickInfo=this.editName=date[0]['name'];
                },
                addGoodsVV:function(){
                    this.vAddGoods=true;
                },
                addGoods:function(date){
                    this.$http.get('/goods/addChild/'+this.addGoodsId+'/'+ this.editcId).then((response)=>{
                        this.$http.get('/goods/getTree/'+this.thisGoodId).then((response)=>{this.oneGoodsTree=response.data; },(response) =>{});
                    },(response) =>{});
                },
                delGoods:function(date){
                   this.$http.get('/goods/delChild/'+this.editcId+'/'+ this.editpId).then((response)=>{
                        this.$http.get('/goods/getTree/'+this.thisGoodId).then((response)=>{this.oneGoodsTree=response.data; },(response) =>{});
                    },(response) =>{});
                }


        },
 /*******************************************************************//*******************************************************************/


    });

</script>




@endsection

@section('pagejs')
          

@endsection